<!-- 未完善：冒号、搜索框、头像 -->
<template>
    <div class="recommend">
        <div class="recommend-content">
            <div class="recommend-margin"></div>
            <div class="recommend-banner">
                <div class="image1"><img src="../assets/recommend.png" alt=""></div>
                <div class="title1">{{ time }}！{{ name }}!</div>
                <div class="title2">请查收为你定制的专属题单 ！</div>
                <div class="image2"><img src="../assets/banner.png" alt=""></div>
            </div>
            <div class="recommend-thirdrec">
                <div class="recommend-thirdrec-child">
                    <h1>定制题单</h1>
                    <ul>
                        <li v-for="(firstlist, index) in firstlists" :key="firstlist"><el-link
                                @click="dialogVisible = true, everyDialog(index, 1)">{{
                                    firstlist }}</el-link></li>
                    </ul>
                </div>
                <div class="recommend-thirdrec-child">
                    <h1>分类推荐</h1>
                    <ul>
                        <li v-for="(secondlist, index) in secondlists" :key="secondlist"><el-link
                                @click="dialogVisible = true, everyDialog(index, 2)">{{
                                    secondlist }}</el-link></li>
                    </ul>
                </div>
                <div class="recommend-thirdrec-child">
                    <h1>难度推荐</h1>
                    <ul>
                        <li v-for="(thirdlist, index) in thirdlists" :key="thirdlist"><el-link
                                @click="dialogVisible = true, everyDialog(index, 3)">{{
                                    thirdlist }}</el-link></li>
                    </ul>
                </div>
            </div>
            <div class="recommend-twopart">
                <div class="recommend-twopart-child">
                    <h1>学习计划</h1>
                    <ul>
                        <li v-for="(plan, index) in plans" :key="plan"><el-link
                                @click="dialogVisible = true, everyDialog(index, 4)">{{ plan }}</el-link>
                        </li>
                    </ul>
                </div>
                <div class="recommend-twopart-child">
                    <h1>热门题目</h1>
                    <ul>
                        <li v-for="(hot, index) in hots" :key="hot"><el-link
                                @click="dialogVisible = true, everyDialog(index, 5)">{{ hot }}</el-link>
                        </li>
                    </ul>
                </div>
            </div>
        </div>


        <el-dialog :visible.sync="dialogVisible" width="30%">
            <span class="dialog-banner"><el-link class="elLinkBigger" @click="linkRecord">{{ dialogBanner
            }}</el-link></span>
            <div class="dialog-tag">
                <ul>
                    <li v-for="tag in tags" :key="tag">{{ tag }}</li>
                </ul>
            </div>
            <div class="dialog-info">{{ dialogInfo }}</div>
            <!-- 收藏button -->
            <el-button class="dialog-collection" :icon="Collection" circle @click="toggleCollection"></el-button>
            <el-button class="dialog-record" v-if="showRecordButton" :icon="Record" circle
                @click="toggleRecord"></el-button>

            <div class="dialog-divide"></div>


            <div class="dialog-rate">
                <span class="demonstration">为CodePilot的推荐打分：</span>
                <el-rate v-model="rate" :allow-half="true">
                </el-rate>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false, submitRate()">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import { createCollection } from '@/api/collection'
import { getRecommendList } from '@/api/recommend'
import { getProInfoFromUid } from '@/utils/useful';
import { isCollection } from '@/utils/useful';
import { isRecord } from '@/utils/useful';
import { createRecord } from '@/api/record'
import { deleteCollection } from '@/api/collection'
import { doneRecord } from '@/api/record'
import { getUserInfo } from '@/api/user';
import { judgeTime } from '@/utils/useful';
import { getProUid } from '@/utils/useful';
import { getTime } from '@/utils/useful'




export default {
    data() {
        return {
            firstlists: [],
            firstlistsInfo: [],
            secondlists: [],
            secondlistsInfo: [],
            thirdlists: [],
            thirdlistsInfo: [],
            plans: [],
            plansInfo: [],
            hots: [],
            hotsInfo: [],
            dialogVisible: false,
            dialogBanner: '',
            tags: [],
            dialogInfo: '',
            Collection: "",
            rate: 0,
            Record: '',
            showRecordButton: false,
            problemUid: null,
            name: '',
            time: '',
        };
    },
    mounted() {
        Promise.all([
            getRecommendList("customized"),
            getRecommendList("classified"),
            getRecommendList("challenging"),
            getRecommendList("hot"),
            getUserInfo()
        ])
            .then(async (results) => {
                this.name = results[4].data.username


                // console.log(results[0])
                const customizedRes = Object.values(results[0].data.problemList);

                const classifiedRes = Object.values(results[1].data.problemList);

                const challengingRes = Object.values(results[2].data.problemList);

                const hotRes = Object.values(results[3].data.problemList);

                const difficultyMapping = {
                    "Medium": "中等",
                    "Easy": "简单",
                    "Hard": "困难",
                    "very easy": "简单",
                    "little easy": "简单",
                    "regular": "中等",
                    "little hard": "困难",
                    "very hard": "困难",
                };

                let d = '';
                const promises = [];

                //定制题单
                for (var i = 0; i < customizedRes.length && i < 5; i++) {
                    promises.push(getProInfoFromUid(customizedRes[i])
                        .then((proInfo) => {
                            d = difficultyMapping[proInfo.difficulty] || '';
                            proInfo.difficulty = d;
                            this.firstlistsInfo.push(proInfo);
                            this.firstlists.push(proInfo.source + ":" + proInfo.title);
                        }));
                }
                // 分类推荐
                for (var i = 0; i < classifiedRes.length && i < 5; i++) {
                    promises.push(getProInfoFromUid(classifiedRes[i])
                        .then((proInfo) => {
                            d = difficultyMapping[proInfo.difficulty] || '';
                            proInfo.difficulty = d;
                            this.secondlistsInfo.push(proInfo);
                            this.secondlists.push(proInfo.source + ":" + proInfo.title);
                        }));
                }
                // 难度推荐
                // console.log(challengingRes)
                for (var i = 0; i < challengingRes.length && i < 5; i++) {
                    promises.push(getProInfoFromUid(challengingRes[i])
                        .then((proInfo) => {
                            d = difficultyMapping[proInfo.difficulty] || '';
                            proInfo.difficulty = d;
                            this.thirdlistsInfo.push(proInfo);
                            this.thirdlists.push(proInfo.source + ":" + proInfo.title);
                        }));
                }

                // 学习计划
                for (var i = 5; i < customizedRes.length && i < 25; i++) {
                    promises.push(getProInfoFromUid(customizedRes[i])
                        .then((proInfo) => {
                            d = difficultyMapping[proInfo.difficulty] || '';
                            proInfo.difficulty = d;
                            this.plansInfo.push(proInfo);
                            this.plans.push(proInfo.source + ":" + proInfo.title);
                        }));
                }

                // 热门题目
                for (var i = 0; i < hotRes.length && i < 20; i++) {
                    promises.push(getProInfoFromUid(hotRes[i])
                        .then((proInfo) => {
                            d = difficultyMapping[proInfo.difficulty] || '';
                            proInfo.difficulty = d;
                            this.hotsInfo.push(proInfo);
                            this.hots.push(proInfo.source + ":" + proInfo.title);
                        }));
                }

                this.time = judgeTime()
                // 等待所有异步操作完成后进行渲染
                await Promise.all(promises);
            })
            .catch((error) => {
                console.error(error);
            });
    },
    methods: {
        submitRate() {
            console.log(this.rate)
        },
        toggleCollection() {
            console.log(this.problemUid)

            if (this.Collection === "el-icon-star-off") {
                this.Collection = "el-icon-star-on"
                createCollection(null, this.problemUid, "").then((res) => {
                    // console.log(res.data)
                    console.log("create")
                });
            }
            else {
                this.Collection = "el-icon-star-off"
                deleteCollection(this.problemUid).then((res) => {
                    console.log("delete")
                })
            }
        },
        toggleRecord() {
            if (this.Record === "el-icon-goods") {
                this.Record = 'el-icon-s-goods'
                doneRecord(this.problemUid, 0, getTime(), "done").then((res) => {
                    console.log(res.data)
                });
            }
            else { }
        },
        async everyDialog(index, two) {
            let array
            let arrayInfo
            if (two === 1) {
                array = this.firstlists
                arrayInfo = this.firstlistsInfo
            }
            else if (two === 2) {
                array = this.secondlists
                arrayInfo = this.secondlistsInfo
            }
            else if (two === 3) {
                array = this.thirdlists
                arrayInfo = this.thirdlistsInfo
            }
            else if (two === 4) {
                array = this.plans
                arrayInfo = this.plansInfo
            }
            else {
                array = this.hots
                arrayInfo = this.hotsInfo
            }

            this.tags.length = 0

            // console.log(arrayInfo[index])
            // console.log(arrayInfo[index].description)
            this.dialogBanner = array[index];
            this.dialogInfo = arrayInfo[index].description;
            this.externalUrl = arrayInfo[index].url;
            // this.problemUid = arrayInfo[index].id
            this.tags.push(arrayInfo.difficulty)
            //标签
            // console.log(this.tags)
            if (this.tags[0] === '' || this.tags[0] === undefined) {
                this.tags.length = 0
            }

            this.problemUid = await getProUid(arrayInfo[index].source, arrayInfo[index].id);

            let c = isCollection(this.problemUid)

            c.then((value) => {
                if (value === true) {
                    this.Collection = "el-icon-star-on"
                }
                else {
                    this.Collection = "el-icon-star-off"
                }
            })

            let temp = this.problemUid;
            let t = isRecord(temp);
            // console.log(t)

            t.then((value) => {
                if (value === 1) {
                    this.showRecordButton = false;
                } else if (value === 2) {
                    this.showRecordButton = true;
                    this.Record = 'el-icon-s-goods';
                } else if (value === 3) {
                    this.showRecordButton = true;
                    this.Record = 'el-icon-goods';
                } else {
                    console.log("error: isRecord");
                }
            });
        },
        linkRecord() {
            createRecord(this.problemUid).then((res) => {
                window.location.href = this.externalUrl;
            })
        },
    }
}
</script>

<style lang="scss">
.recommend {
    background-color: #FFF7EF;

    .image1 {
        position: absolute;
        left: 3.33%;
        right: 76.83%;
        top: 0%;
        bottom: 0%;

        img {
            height: 230px;
            width: 280px;
            left: 75px;
            top: 18px;
            border-radius: 0px;
        }
    }

    .title1 {
        position: absolute;
        left: 39.5%;
        right: 31.42%;
        top: 30%;
        bottom: 65.17%;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 700;
        font-size: 36px;
        line-height: 44px;
        /* identical to box height */
        color: #865E2A;
    }

    .title2 {
        position: absolute;
        left: 35%;
        right: 34.42%;
        top: 60%;
        bottom: 48.62%;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: 17px;
        line-height: 29px;
        color: #9A6F4A;
    }

    .image2 {
        position: absolute;
        left: 76.83%;
        right: 3.33%;
        top: 30%;
        bottom: 8.97%;

        img {
            height: 131px;
            width: 238px;
            left: 922px;
            top: 133px;
            border-radius: 0px;
        }
    }

    .recommend-content {
        width: 1200px;
        margin: 0 auto;

        .recommend-margin {
            height: 20px;
        }

        .recommend-banner {
            position: relative;
            height: 200px;
            background-image: linear-gradient(135deg, rgb(251, 238, 208), rgb(250, 220, 209));
            border-radius: 30px;
        }

        .recommend-thirdrec {
            display: flex;
            margin-top: 15px;
            height: 150px;
            justify-content: space-between;
            margin-bottom: 15px;

            .recommend-thirdrec-child {
                width: 390px;
                height: 180px;
                box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .25);
                border-radius: 30px;
                text-align: left;
                background-color: #FFEACE;

                h1 {
                    font-size: 22px;
                    color: #633E1C;
                    margin-bottom: 5px;
                    margin-left: 25px;
                    margin-top: 10px;
                }

                ul {
                    margin-top: 2px;
                    margin-left: 26px;
                    margin-bottom: 8px;
                }

                li {
                    height: 26px;
                    font-size: 18px;
                    line-height: 26px;
                }

                .el-link {
                    color: #865E2A;
                    font-size: 18px;
                    // 溢出
                    display: block;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

                a:hover {
                    text-decoration: underline;
                }

                .el-link.is-underline:hover:after {
                    border-bottom: none;
                }

            }
        }

        .recommend-twopart {
            display: flex;
            justify-content: space-between;

            .recommend-twopart-child {
                width: 590px;
                text-align: left;
                border: 2px dotted #FF9000;
                border-radius: 30px;
                margin-top: 50px;
                /* 调整此处的值以实现下移 */

                h1 {
                    font-size: 32px;
                    color: #633E1C;
                    margin-top: 10px;
                    margin-left: 18px;
                }

                ul {
                    margin-top: 2px;
                    margin-left: 20px;
                    margin-bottom: 8px;
                }

                li {
                    height: 38px;
                    font-size: 22px;
                    line-height: 38px;
                }

                .el-link {
                    color: #865E2A;
                    font-size: 22px;
                    // 溢出
                    display: block;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

                a:hover {
                    text-decoration: underline;
                }

                .el-link.is-underline:hover:after {
                    border-bottom: none;
                }

            }
        }
    }
}
</style>